<template>
  <Modal :visible="visible" title="修改密码" size="large" @ok="handleOk" @cancel="handleCancel">
    <template #footer>
      <Button key="submit" type="primary" @click="handleOk">确认</Button>
      <Button key="back" @click="handleCancel">返回</Button>
    </template>
    <div class="centent">
      <Form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :labelCol="{ style: { width: '100px' } }"
        :wrapper-col="{ style: { width: '170px' } }"
        :colon="false"
      >
        <Row>
          <Col :span="24">
            <FormItem label="用户名" name="userName">
              <Input v-model:value="formState.userName" placeholder="请输入用户名" disabled="true" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="24">
            <FormItem label="新密码" name="password">
              <InputPassword v-model:value="formState.password" placeholder="请输入新密码">
                <template #prefix>
                  <LockOutlined class="site-form-item-icon" />
                </template>
              </InputPassword>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="24">
            <FormItem label="确认新密码" name="repeatPassword">
              <InputPassword v-model:value="formState.repeatPassword" placeholder="请确认新密码">
                <template #prefix>
                  <LockOutlined class="site-form-item-icon" />
                </template>
              </InputPassword>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import { ref, defineProps, reactive, watch } from 'vue';
import { Form, Modal, FormItem, Input, message, Button, InputPassword, Row, Col } from 'ant-design-vue';
import { LockOutlined } from '@ant-design/icons-vue';
import { updatePasswordSaaSUser } from '/@/api/organization-mgmt/user';

const formRef = ref();
// 接收父组件的值
let props = defineProps({
  visible: Boolean,
  user: Object,
});
interface User {
  userId: string;
  userName: string;
  password: string;
  repeatPassword: string;
}

const formState = reactive<Partial<User>>({});
var validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== formState.password) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback();
  }
};
const rules = {
  password: [
    {
      trigger: 'change',
      required: true,
      message: '请输入密码',
    },
    {
      pattern: /[a-zA-Z\d!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]{8,18}/,
      message: '请输入密码长度为8-18位,包含大小写字母、数字和特殊字符4类至少3类',
    },
  ],
  repeatPassword: [
    {
      trigger: 'change',
      required: true,
      message: '请输入密码',
    },
    { validator: validatePass2, trigger: 'blur', required: true },
  ],
};

let visible = ref(props.visible);

let propsRef = reactive(props);
function resetForm() {
  formRef.value.resetFields();
}
const emit = defineEmits(['close']);

const handleCancel = () => {
  resetForm();
  emit('close', 'close');
};
const handleOk = async () => {
  formRef.value.validate().then(async () => {
    const values = { ...formState };

    const res = await updatePasswordSaaSUser(values);
    if (res) {
      message.success('修改密码成功！');
      emit('close', 'success');
    } else {
      message.error('修改密码失败！');
      emit('close', 'close');
    }
  });
};

watch(propsRef, async (newValue) => {
  visible.value = newValue.visible;
  formState.userId = newValue.user?.id;
  formState.userName = newValue.user?.userName;
});
</script>
<style lang="less"></style>
